<template>
    <!--v-on的语法：
        v-on:事件名="事件处理函数名"
        v-on:事件名="事件处理函数名(参数)"
        简写的方式：
        @事件名="事件处理函数名"
    -->
    <h1>去郑州胖来购物</h1>
    <h3>购物的数量为：{{ count }}</h3>
    <button v-on:click="count++">每次购物限量购买</button>
    <button v-on:click="add()">购买一个</button>
    <button v-on:click="addcount(5)">购买5个</button>
    <!--v-on 事件处理函数-->
    <hr>
    <a href="http://www.baidu.com" @click.prevent="one"> 阻止去百度</a> &nbsp;&nbsp;
    <a :href="aurl" @click="two(10,$event)">阻止去百度2</a>
    <!--结合案例： 点击修改选择器 id -- class-->
    <hr>
    <span :[idclass]="id">v-bindId选择器的样式</span>
    <!-- <span id="d1" style=""></span> -->
     <button @click="idclass='class'">点击改变选择器的样式</button>
    <!-- v-on修饰符
        .stop 阻止事件冒泡
        .prevent 阻止默认事件
        .once 只触发一次事件
     -->
     <div @click="oneDiv">
        <button @click.stop="btn">阻止事件冒泡</button>
        <a :href="aurl" @click.prevent="btn">阻止默认事件</a>
        <button @click.once="btn">只执行一次</button>
     </div>
</template>

<script>
export default {
    data() { 
        return {
            count: 0,
            aurl: 'http://www.baidu.com',
            id: 'd1',
            idclass:'id'
        }
    },
    methods: {
        add() { 
            this.count++
        },
        addcount(num) { 
            this.count += num
        },
        one(e) { 
            e.preventDefault()
            console.log('阻止了去百度1');
            
        },
        two(num, e) { 
            this.count += num
            e.preventDefault()
        },
        oneDiv() { 
            console.log("div被触发了有水花了");
            
        },
        btn() { 
            console.log("按钮被触发了...");
            
        }
    }
}
</script>

<style scoped>
#d1{
    color: red;
    font-weight: 800;
}
.d1{
    color: blueviolet;
    font-size: 30px;
}
</style>